{extend name="default/layout" /}

{block name="css"}
<link href="/static/default/css/goods/detail.css?v={$static_version}" rel="stylesheet">
<style>
    /* 文章样式 */
    .article-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .article-header {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #eaeaea;
    }

    .article-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1rem;
        font-size: 0.875rem;
        color: #6b7280;
    }

    .article-content {
        font-size: 1.125rem;
        line-height: 1.8;
    }

    .article-content p {
        margin-bottom: 1.5rem;
    }

    .article-content img {
        max-width: 100%;
        height: auto;
        margin: 2rem 0;
        border-radius: 0.5rem;
    }

    .article-author {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 3rem;
        padding-top: 2rem;
         op: 1px solid #eaeaea;
    }

    .author-avatar {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        object-fit: cover;
    }

    .article-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 2rem;
    }

    .article-tag {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        background-color: #f3f4f6;
        color: #4b5563;
    }

    /* 移动端优化 */
    @media (max-width: 768px) {
        .article-header {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
        }

        .article-content {
            font-size: 1rem;
            line-height: 1.6;
        }
    }
</style>
{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 面包屑导航 -->
    {include file="default/goods/detail/components/breadcrumb" /}

    <!-- 文章主体 -->
    <div class="flex flex-col lg:flex-row gap-8">
        <!-- 左侧文章内容 -->
        <div class="lg:w-2/3">
            <div class="bg-white rounded-sm p-6 border border-gray-200">
                <div class="article-container">
                    <!-- 文章头部 -->
                    <div class="article-header">
                        <h1 class="text-3xl font-bold text-gray-800">{$goods.name}</h1>
                        <div class="article-meta">
                            <span><i class="far fa-calendar-alt mr-1"></i> {$goods.create_time|date='Y-m-d'}</span>
                            <span><i class="far fa-eye mr-1"></i> {$goods.views} 阅读</span>
                        </div>
                    </div>

                    <!-- 文章内容 -->
                    <div class="article-content rich-text">
                        {$goods.content|raw}
                    </div>

                    <!-- 文章标签 -->
                    {if $goods.tags && count($goods.tags) > 0}
                    <div class="article-tags">
                        {volist name="goods.tags" id="tag"}
                        <span class="article-tag"># {$tag}</span>
                        {/volist}
                    </div>
                    {/if}
                </div>
            </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="lg:w-1/3 mt-8 lg:mt-0">

            <!-- 相关推荐 -->

            <div class="bg-white rounded-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-gray-800">相关文章</h3>
                </div>
                <div class="p-4">
                    <div class="space-y-4">
                        {volist name="related_goods" id="item" key="index"}
                        {if $index <= 5} <div
                            class=" rounded-sm overflow-hidden  transition-shadow">
                            <a href="{:_url_('goods.detail', ['id' => $item.id])}" class="block">
                                <div class="flex gap-3 p-3">
                                    {if $item.slider_image && count($item.slider_image) > 0}
                                    <div class="flex-shrink-0">
                                        <img data-src="{$item.slider_image[0]}" alt="{$item.name}"
                                            class="w-20 h-12 object-cover rounded lazy-image">
                                    </div>
                                    {/if}
                                    <div class="flex-1 min-w-0">
                                        <h4 class="font-medium text-gray-800 text-sm mb-2 line-clamp-2">
                                            {$item.name}</h4>
                                        <div class="flex items-center justify-between">
                                            <span
                                                class="text-xs text-gray-500">{$item.create_time|date='Y-m-d'}</span>
                                            <span class="text-xs text-gray-500">
                                                <i class="fas fa-eye mr-1"></i>{$item.views|default=0}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                    </div>
                    {/if}
                    {/volist}
                </div>
            </div>
        </div>

    </div>
</div>
</div>
{/block}

{block name="js"}
<!-- 引入外部JS文件 -->
<script src="/static/default/js/goods/detail.js?v={$static_version}"></script>

<!-- 页面数据 -->
<script>
    // 商品数据
    window.goodsData = JSON.parse('{$goods|raw|json_encode}');
</script>

<!-- 页面初始化 -->
<script>
    $(document).ready(function () {
        // 初始化商品详情页
        if (window.GoodsDetail) {
            GoodsDetail.init(window.goodsData);
        }

        // 图片懒加载
        document.addEventListener('DOMContentLoaded', function () {
            const lazyImages = [].slice.call(document.querySelectorAll('.lazy-image'));

            if ('IntersectionObserver' in window) {
                let lazyImageObserver = new IntersectionObserver(function (entries, observer) {
                    entries.forEach(function (entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImage.classList.remove('lazy-image');
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });

                lazyImages.forEach(function (lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            } else {
                // 不支持IntersectionObserver的降级处理
                lazyImages.forEach(function (lazyImage) {
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove('lazy-image');
                });
            }
        });
    });
</script>
{/block}